  <template>
  <div class="box">
      <tou-bu></tou-bu>
      <toubu-log></toubu-log>
      <div class="example-3d" v-if="arr">
        <div class="my-mz">
          {{mz}}
        </div>
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide v-for="(item,index) in brr"
          :key="index"
          >
          <img @click="vvv(item)" :src="item.img | tiHuan(item.img) " alt="">
          
          </swiper-slide>
         
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="introduce" v-if="arr">
          <div class="timu">
            <span class="timu1">{{ti}}</span>
            <span v-if="ti3" class="timu2">{{ti3}}分</span>
          </div>
          <div class="time">{{ti2}}</div>
      </div>
      <my-list :list='EldensRing'></my-list>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
import touBu from  "../components/headRuten.vue";
import toubuLog from'../components/myhead-tu.vue';
import myList from'../lunBotu/lunBolieBiao.vue';

 export default {
    name: 'swiper-example-3d-coverflow',
    title: '3D Coverflow effect',
    components: {
      Swiper,
      SwiperSlide,
      touBu,
      toubuLog,
      myList
    },
    data() {
      return {
        swiperOption: {
            slidesPerView: 3,
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        
      
          
        },
        mz:null,
        arr:null,
        brr:null,
        ti:null,//题目
        ti2:null,//介绍
        ti3:null,//评分
        EldensRing:null,
      };
    },
    methods:{
        vvv(a){
            console.log(a);
            this.ti = a.nm
            this.ti2 = a.desc
            this.ti3 = a.sc
            this.EldensRing =a
        }
    },
    filters:{
      tiHuan(e){
        let imgUrl = e.replace("w.h","74.109")
        return imgUrl
      }
    },
    created(){
    let Pm =  this.axios.get(`https://apis.netstart.cn/maoyan/cinema/shows?cinemaId=${this.$store.state.cinemaId}&ci=${this.$store.state.myctsid}&channelId=4`)
    
      Pm.then(re=>{
        
        // console.log(re.data.data.movies);
        // console.log(re.data.data.cinemaName);
        this.arr = re.data.data
        console.log(this.arr,"aaa");
        this.brr = this.arr.movies
        // console.log(this.brr);
        this.mz = this.arr.cinemaName
        this.ti = this.arr.movies[0].nm
        this.ti2 =this.arr.movies[0].desc
        this.ti3 = this.arr.movies[0].sc
        this.EldensRing = this.arr.movies[0]
        console.log(this.EldensRing);

      })
     console.log(this.$store.state.cinemaId);
    }
    
  
  }
</script>

<style lang="less" scoped>
.box{

  .example-3d {
    width: 100%;
    // height: 300px;
    // padding-top: 10px;
    // padding-bottom: 50px;
    .my-mz{
      font-size: 20px;
      font-weight: 700;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 100%;
      padding: 10px 0;
      margin: 10px 0;
      color: wheat;
       background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);
      background-color: white;
    }
  }
    .introduce{
      .timu{
        text-align: center;
        .timu1{
          white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          font-size: 23px;
          font-weight: 900;
          color: black;
        }
        .timu2{
          font-size: 15px;
          color: #ff9569;
          font-weight: 600;
          margin-left: 10px;
        }
      }
      .time{
        font-size: 15px;
        text-align: center;
        margin-top: 10px;
        >span{
          padding: 0 10px;
        }
      }
    }

  .swiper {
    height: 160px;
    width: 100%;
    img{
      width: 100%;
      height: 160px;
    }

    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 150px;
      height: 140px;
      text-align: center;
      font-weight: bold;
      font-size: 15px;
      // background-color: red;
      background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);
      background-position: center;
      background-size: cover;
      color: chartreuse;
    }
    .swiper-slide, swiper-slide-active{
       width:  150px;
    }
    
  }
}
</style>
</script>
